<!--
 * @Author:shuaishuai
-->
<template>
  <div class="center-content-box">
    <!-- 上 -->
    <div class="topBox flex">
      <div class="firebox">
        <p class="num">6.53</p>
        <p class="unit">万亿千瓦时</p>
        <img src="../ImgFile/fireFdz.png.png" alt="" width="380px" height="365px" />
        <p class="name">火力发电量</p>
      </div>
      <div class="barChart">
        <p class="title">燃煤发电占比趋势</p>
        <div ref="barChart01" style="width: 990px; height: 480px"></div>
      </div>
      <div class="coalbox">
        <p class="num">6.53</p>
        <p class="unit">万亿千瓦时</p>
        <img src="../ImgFile/CoalBurningFdz.png" alt="" width="467px" height="341px" />
        <p class="name">煤电发电量</p>
      </div>
      <div class="barChart">
        <!-- <p class="title">燃煤发电占比趋势</p> -->
        <!-- <div ref="barChart02" style="width: 990px;height: 480px;"></div> -->
        <img
          src="../ImgFile/fdzb.jpg"
          alt=""
          width="958px"
          height="527px"
          style="margin-top: 50px; margin-left: 20px"
        />
      </div>
      <div class="electricitybox">
        <p class="num">27.24</p>
        <p class="unit">亿吨</p>
        <img src="../ImgFile/electricityGeneration.png" alt="" width="398px" height="352px" />
        <p class="name">煤电发电量</p>
      </div>
    </div>
    <!-- 下 -->
    <div class="bottomBox">
      <p class="title">发电行业煤炭消费总量</p>
      <div ref="barChart02" style="width: 100%; height: 86%"></div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { color } from 'echarts'
import * as echarts from 'echarts'

export default defineComponent({
  data() {
    return {}
  },
  created() {},
  mounted() {
    this.getChart01()
    this.getChartTwo()
  },
  methods: {
    getChart01() {
      let chart = echarts.init(this.$refs.barChart01)
      let colorData = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: 'rgba(10, 132, 255, 1)'
        },
        {
          offset: 1,
          color: 'rgba(10, 132, 255, 0.1)'
        }
      ])
      let option = {
        grid: {
          top: 40,
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(8,45,74,0.85)',
          borderColor: 'rgb(140,255,74)', //设置边框颜色
          padding: 12,
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize: 28,
            color: '#fff'
          },
          formatter: (params) => {
            let arr = [...params]
            let str = ''
            arr.forEach((item, index) => {
              str +=
                '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:rgba(10, 132, 255, 1);"></span>' +
                item.seriesName +
                '  ' +
                item.data +
                '<br />'
            })
            // item.borderColor.color.colorStops[0].color
            str = arr[0].name + '<br />' + str
            return str
          }
        },
        xAxis: {
          data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: 'rgba(109, 117, 121, 1)'
            }
          },
          axisTick: {
            show: true //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', //X轴文字颜色
              fontSize: 28
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '%',
            nameTextStyle: {
              color: '#ebf8ac',
              fontSize: 28
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFFFFF'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ebf8ac',
                fontSize: 28
              }
            }
          }
        ],
        series: [
          {
            name: '占比',
            type: 'bar',
            barWidth: 25,
            itemStyle: {
              normal: {
                borderColor: colorData,
                borderWidth: 3,
                // color: colorData
                color: function (params) {
                  return params.name == '2024' ? 'rgba(20, 157, 220, 0)' : colorData // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
                }
              }
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
          }
        ]
      }

      chart.setOption(option, true)
    },
    getChartTwo() {
      let chart = echarts.init(this.$refs.barChart02)
      const payload = {
        id: '',
        data: {
          title: ['消费量', '增速'],
          unit: ['%'],
          x: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
          data1: [3650, 2400, 2800, 1700, 800, 1600, 600, 2600],
          data2: [50, 40, 70, 45, 38, 48, 39, 65]
        }
      }

      // const unit = payload.data.unit || [];
      const x = payload.data.x || []
      const data1 = payload.data.data1 || []
      const title = payload.data.title || []

      let option = {
        grid: {
          // 让图表占满容器
          top: '20%',
          left: '3%',
          right: '3%',
          bottom: '10%',
          containLabel: true
        },

        legend: [
          {
            left: 'center',
            top: '70',
            textStyle: {
              fontSize: 40,
              color: '#ffffff',
              padding: 14
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(8,45,74,0.85)',
          borderColor: 'rgb(140,255,74)', //设置边框颜色
          padding: 12,
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize: 40,
            color: '#fff',
            align: 'left'
          },
          formatter: (params) => {
            let arr = [...params]
            let str = ''
            arr.forEach((item, index) => {
              if (item.componentSubType == 'line') {
                str +=
                  '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  item.color +
                  ';"></span>' +
                  item.seriesName +
                  '  ' +
                  item.data +
                  '%' +
                  '<br />'
              } else {
                str +=
                  '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  item.borderColor +
                  ';"></span>' +
                  item.seriesName +
                  '  ' +
                  item.data +
                  '<br />'
              }
            })
            str = arr[0].name + '<br />' + str
            return str
          }
        },
        xAxis: {
          data: x,
          axisLabel: {
            fontSize: 40,
            color: 'white',
            show: true,
            interval: 0, // 使x轴文字显示全
            formatter: function (params) {
              if (params.length > 6) {
                return `${params.slice(0, 5)}...`
              }
              return params
            },
            margin: 20
          },

          // 背景线
          // splitLine: {
          //   show: true,
          //   // interval: information.area.length,
          //   lineStyle: {
          //     color: 'rgba(180, 228, 255, 0.1)',
          //     width: 2
          //   }
          // },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
              width: 0,
              type: 'solid'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '亿吨',
            nameGap: 25,
            splitLine: {
              show: false
              // lineStyle: {
              //   color: "#ffffff",
              // },
            },
            nameTextStyle: {
              color: 'white',
              fontSize: 40,
              padding: [0, 0, 10, -60]
            },
            axisLabel: {
              fontSize: 40,
              color: 'white'
            },
            axisLine: {
              lineStyle: {
                // 坐标线
                type: 'solid',
                color: 'rgba(0, 0, 0, 0.5)', // 轴的颜 色
                width: '1' // 坐标线宽度
              }
            }
          },
          {
            name: '%',
            // max: maxR,
            nameTextStyle: {
              color: '#fff',
              fontSize: 40,
              padding: [0, 0, 10, 20]
            },

            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 40
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)'
              }
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: title[0],
            type: 'bar',
            barWidth: 165,
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(21,136,209,0.1)'
            },
            itemStyle: {
              // color: "rgba(41, 215, 227, 1)"
              borderColor: 'rgba(41, 215, 227, 1)',
              borderWidth: 3,
              color: function (params) {
                return params.name == '2024' ? 'rgba(20, 157, 220, 0)' : 'rgba(41, 215, 227, 1)' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
              }
            },
            data: data1,
            z: 0,
            zlevel: 0
          },
          {
            name: title[0],
            type: 'pictorialBar',
            barWidth: 165,
            tooltip: {
              show: false
            },

            itemStyle: {
              // color: "rgba(1,34,155,1)", //数据的间隔颜色
              color: function (params) {
                return params.name == '2024' ? 'rgba(41, 215, 227, 1)' : '#012c8c' // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
              }
            },
            symbolRepeat: 'true',
            symbolMargin: 9,
            symbol: 'rect',
            symbolSize: [165, 6],
            data: data1,
            z: 1,
            zlevel: 0,
            label: {
              show: false
            }
          },
          {
            z: 9,
            yAxisIndex: 1,
            name: title[1],
            type: 'line',
            // smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 26, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: 'rgba(255, 195, 0, 1)',
              borderColor: '#fff',
              borderWidth: 6
            },
            lineStyle: {
              color: 'rgba(255, 195, 0, 1)',
              width: 5
            },
            data: [66, 43, 5, 44, 53, 24, 54, 44]
          }
        ]
      }

      chart.setOption(option, true)
    }
  }
})
</script>

<style lang="scss" scoped>
.center-content-box {
  width: 5890px;
  height: 1830px;

  // height: 1700;
  .flex {
    display: flex;
  }

  .topBox {
    width: 100%;
    height: 50%;

    .num {
      font-size: 80px;
      font-weight: bold;
      color: rgba(255, 235, 59, 1);
      line-height: 150px;
      margin-top: 70px;
    }

    .unit {
      color: rgba(92, 255, 239, 1);
      font-size: 80px;
    }

    .name {
      font-size: 50px;
      color: #fff;
    }

    .firebox {
      width: 700px;
      height: 860px;
      margin-left: 150px;
      text-align: center;
    }

    .coalbox {
      width: 700px;
      height: 860px;
      margin-left: 690px;
      text-align: center;
    }

    .barChart {
      .title {
        color: rgba(92, 255, 239, 1);
        font-size: 45px;
        text-align: center;
        margin-top: 80px;
      }

      width: 991px;
      height: 609px;
      margin: 135px 90px 0 80px;
    }

    .electricitybox {
      width: 700px;
      height: 860px;
      margin-left: 530px;
      text-align: center;
    }
  }

  .bottomBox {
    width: 100%;
    height: 50%;

    .title {
      text-align: center;
      color: #fff;
      font-size: 60px;
      line-height: 50px;
    }
  }
}
</style>
